การตั้งค่าแสดงผลหน้า ERROR ด้วย HTML ใน ELB (ALB)

การตั้งค่าแสดงผลหน้า ERROR ด้วย HTML ใน ELB (ALB)

เราสามารถปรับแต่งการแสดงผลหน้า Error โดยการเพิ่มลูกเล่นและสีสรรค์ด้วยโค้ดของ text/plain, text/css, text/html, application/javascript, application/json ที่มีมาให้เลือกได้ตามต้องการ
Clock Icon2022.09.28

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

POP จากบริษัท Classmethod (Thailand) ครับ

ครั้งนี้ผมจะมาแนะนำการตั้งค่าแสดงผลหน้า ERROR ด้วย HTML ใน ELB (ALB)

สิ่งที่ต้องมี

  • ต้องมี Elastic Load Balancers ใน EC2 ที่เชื่อมต่อกับ CloudFront แล้ว
  • ต้องมีการตั้งค่า Custom Headers ระหว่าง CloudFront กับ Elastic Load Balancers แล้ว

สำหรับผู้ใช้งานที่ต้องการเรียนรู้เกี่ยวกับการตั้งค่า Custom Headers ใน CloudFront และการตั้งค่า Rules ใน Elastic Load Balancers ให้ดูที่ลิงก์ด้านล่างนี้ครับ

ขั้นตอน

เข้ามาที่ EC2 > Load Balancers
จากนั้นติ๊กที่awseb-AWSEB-xxxxxxxxxxxxx (Name ของเรา) ก็จะมีรายละเอียดแสดงที่ด้านล่าง
แล้วเลือกหัวข้อListenersก็จะมีรายละเอียดแสดงขึ้นมา ทีนี้ให้ดูที่คอลัมน์ Rules แล้วคลิกView/edit rulesได้เลย

คลิกไอคอน?ที่แท็บด้านบน แล้วคลิกไอคอน?last HTTP 80: default action

ดูที่คอลัมน์ THEN คลิกไอคอน?1. Return fixed response 403

แล้วให้เลือก Content-Type:text/html

และคัดลอกโค้ดด้านล่างนี้วางลงในช่องResponse bodyและคลิก(character length กำหนดไว้สูงสุดที่ 1024 ตัวอักษร)

<!DOCTYPE html>
<html>
<head>
<title>Access Denied</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
body{
background-color: black;
color: white;
}

h1 {
color: red;
}

h6{
color: red;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="w3-display-middle">
<h1 class="w3-jumbo w3-animate-top w3-center"><code>Access Denied</code></h1>
<hr class="w3-border-white w3-animate-left" style="margin:auto;width:50%">
<h3 class="w3-center w3-animate-right">You dont have permission to view this site.</h3>
<h3 class="w3-center w3-animate-zoom">????</h3>
<h6 class="w3-center w3-animate-zoom">error code:403 forbidden</h6>
</div>
</body>
</html>

อ้างอิง: Access Denied page template

คลิก(more)เพื่อดูรายละเอียด และคลิกUpdate

เมื่อเสร็จแล้วจะแสดงหน้าจอแบบนี้ จากนั้นให้ไปทดสอบที่หน้าเว็บไซต์ของเราได้เลย

ตรวจสอบ URL หลังตั้งค่า

URL ที่จะทำการตรวจสอบก็จะมีดังนี้
・URL ของ Elastic Beanstalk
・DNS name ของ Load Balancers
・Distribution domain name ของ CloudFront

URL ของ Elastic Beanstalk
เปิด URL ของ Elastic Beanstalk ก็จะแสดง Error ตามที่เราได้ตั้งค่าไว้

http://[Environment name].[Active Region].elasticbeanstalk.com


DNS name ของ Load Balancers
เปิด DNS name ของ Load Balancers ก็จะแสดง Error ตามที่เราได้ตั้งค่าไว้

http://awseb-awseb-xxxxxxxxxx-xxxxxxxxxx.ap-southeast-1.elb.amazonaws.com/


Distribution domain name ของ CloudFront
เปิด Distribution domain name ของ CloudFront ก็จะเห็นว่าสามารถเข้าถึงหน้าเว็บไซต์ได้

https://xxxxxxxxxx.cloudfront.net

สุดท้ายนี้

เราสามารถดีไซน์หน้า Error ของเราให้มีลูกเล่นและสีสรรค์ได้ ซึ่งการตั้งค่านี้ผมคิดว่าจะทำให้การใช้งานเว็บไซต์ของเรามีความน่าสนใจและน่าใช้มากขึ้นครับ

ผมหวังว่าบทความนี้จะเป็นประโยชน์ให้กับผู้อ่านได้นะครับ

POP จากบริษัท Classmethod (Thailand) ครับ !

Link อ้างอิง

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.